<template>
    <div style="overflow:auto;height:100%;padding: 10px">
        <Row :gutter="16" >
            <i-col span="16">
                <Card dis-hover>
                    <div class="top_left_swiper" >
                        <div class="top_common_title">
                            <div class="top_common_title_left">
                                <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/leader.png"/>
                                <p class="top_common_title_left_title">企业动态</p>
                            </div>
                            <router-link class="top_common_title_right" :to="{path:'/wholePage',query:{name: '企业动态', type: '1'}}">更多<Icon type="ios-arrow-forward" /></router-link>
                        </div>
                        <div class="top_artical_div">
                            <Spin fix v-if="lunboArticalsSkip"></Spin>
                            <Row :gutter="16">
                                <i-col span="10">
                                    <swiper  class="top_img"  :options="swiperOption">
                                        <Swiper-slide  class="top_img"  v-for="(item,index) in lunboArticals">
                                            <img class="top_img" :src="item.img"  @click="toViewArtical(index,'3')"/>
                                        </Swiper-slide>
                                    </swiper>
                                </i-col>
                                <i-col span="14">
                                    <div class="top_artical_div" >
                                        <ul  class="articals" style="margin-top: 6px">
                                            <li class="artical" v-for = "(item,index) in articleInfo">
                                                <div class="articals_child">
                                                    <router-link   class="articals_child_title" target="_blank" :to="{path:'/artical',query:{id:item.infoId}}">{{item.infoTitle}}</router-link>
                                                    <p class="articals_child_date">{{item.createDate}}</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </i-col>
                            </Row>
                        </div>
                    </div>
                </Card>
            </i-col>
            <i-col span="8">
                <Card dis-hover>
                    <div class="top_center_leader" >
                        <div class="top_common_title">
                            <div class="top_common_title_left">
                                <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/jianghua.png"/>
                                <p class="top_common_title_left_title">快捷功能</p>
                            </div>
                        </div>
                        <div class="top_artical_div">
                            <div class="fast_menu_div">
                                <div v-for="(item,index) in fastMenus" style="width:100px;display:flex;flex-direction:column;align-items:center">
                                    <div :class="[`fast_menu_div${index%7}`,`fast_menu_div_comm`]" @click="toViewMenu(item)">
                                        <i style="font-size:40px;" :class="item.iconCode"/>
                                    </div>
                                    <span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #000000;">{{item.menuName}}</span>
                                </div>
                                <div style="width:100px;display:flex;flex-direction:column;align-items:center">
                                    <div class="zidingyi fast_menu_div_comm" @click="toManagerFastMenu">
                                        <p class="zidingyi_top">+</p>
                                    </div>
                                    <span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #000000;">自定义</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>
            </i-col>
        </Row>
        <Row :gutter="16" style="margin-top: 10px">
               <i-col span="8">
                   <Card dis-hover>
                       <div class="top_center_leader" >
                           <div class="top_common_title">
                               <div class="top_common_title_left">
                                   <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/zixun.png"/>
                                   <p class="top_common_title_left_title">法律法规</p>
                               </div>   <!--target="_blank"-->
                               <router-link class="top_common_title_right" :to="{path:'/wholePage',query:{name: '法律法规', type: '3',id:this.Common.falvfaguiziliao}}">更多<Icon type="ios-arrow-forward" /></router-link>
                           </div>
                           <div class="top_artical_div" >
                               <Spin fix v-if="infosSkip"></Spin>
                               <ul  class="articals" >
                                   <li class="artical" v-for = "(item,index) in infos">
                                       <div class="articals_child">
                                           <router-link class="articals_child_title" target="_blank" :to="{path:'/noticeDetail',query:{id:item.id,name:item.name,createDate:item.createDateStr,type:1}}">{{item.name}}</router-link>
                                           <!--<a @click="downloadFile1(item)" class="articals_child_title">{{item.name}}</a>-->
                                           <p class="articals_child_date">{{item.createDateStr}}</p>
                                       </div>
                                   </li>
                               </ul>
                           </div>
                       </div>
                   </Card>
               </i-col>
               <i-col span="8">
                   <Card dis-hover>
                       <div class="top_center_leader" >
                           <div class="top_common_title">
                               <div class="top_common_title_left">
                                   <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/leader.png"/>
                                   <p class="top_common_title_left_title">科普宣教</p>
                               </div>
                               <router-link   class="top_common_title_right" :to="{path:'/wholePage',query:{name: '科普宣教', type: '4'}}">更多<Icon type="ios-arrow-forward" /></router-link>
                           </div>
                           <div class="top_artical_div" >
                               <Spin fix v-if="popularizationSkip"></Spin>
                               <ul  class="articals" >
                                   <li class="artical" v-for = "(item,index) in popularization">
                                       <div class="articals_child">
                                           <router-link   class="articals_child_title" target="_blank" :to="{path:'/popularizationPlay',query:{id: item.popularizationId}}">{{item.title}}</router-link>

                                           <p class="articals_child_date">{{item.createDate}}</p>
                                       </div>
                                   </li>
                               </ul>
                           </div>
                       </div>

                   </Card>
               </i-col>

               <i-col span="8">
                   <Card dis-hover>
                       <div class="top_right_zixun">
                           <div class="top_common_title">
                               <div class="top_common_title_left">
                                   <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/jianghua.png"/>
                                   <p class="top_common_title_left_title">通知公告</p>
                               </div>
                               <router-link class="top_common_title_right" :to="{path:'/wholePage',query:{name: '通知公告', type: '2'}}">更多<Icon type="ios-arrow-forward" /></router-link>
                           </div>
                           <div class="top_artical_div" >
                               <Spin fix v-if="noticeSkip"></Spin>
                               <ul  class="articals" >
                                   <li class="artical" v-for = "(item,index) in notices">
                                       <div class="articals_child">
                                           <router-link class="articals_child_title" target="_blank" :to="{path:'/noticeDetail',query:{id:item.proposalId,type:0}}">{{item.title}}</router-link>
                                           <p class="articals_child_date">{{item.createDate}}</p>
                                       </div>
                                   </li>
                               </ul>
                           </div>
                       </div>
                   </Card>
               </i-col>
            </Row>

        <Row :gutter="16" style="margin-top: 10px">
            <i-col span="24">
                <Card dis-hover>
                    <div class="top_right_zixun" >
                        <div class="top_common_title">
                            <div class="top_common_title_left">
                                <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/zixun.png"/>
                                <p class="top_common_title_left_title">热门活动</p>
                            </div>
                        </div>
                        <div class="remenhuodong_div">
                            <div  class="huodong" v-for = "(item,index) in remenhuodongLists">
                                <img class="huodong_item_img" :src="item.cover" @click="toViewHuoDong(item)"/>
                                <p class="huodong_item_title">{{item.tpshow}}</p>
                            </div>
                        </div>
                    </div>
                </Card>
            </i-col>
        </Row>
        <Row :gutter="16" style="margin-top: 10px">
            <i-col span="24" >
                <div style="width: 100%;margin: auto">
                    <img style="width:100%;height:90px" src="../../assets/bbmg/safe/zhengji.jpg"/>
                </div>
            </i-col>
        </Row>
        <Row :gutter="16" style="margin-top: 10px">
            <i-col span="24">
                <Card dis-hover>
                    <div class="ziliao_div" >
                        <div class="top_common_title">
                            <div class="top_common_title_left">
                                <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/zixun.png"/>
                                <p class="top_common_title_left_title">资料共享</p>
                            </div>
                        </div>
                        <div class="ziliao_content_div">
                            <div  class="ziliao" v-for = "(item,index) in ziliaos">
                                <img :src="item.iconUrl" style="width: 25px;height: 25px" @click="toViewZiLiao(index)"/>
                                <a @click="toViewZiLiao(index)" style="margin-left:10px;color: #2c3e50;">{{item.name}}</a>
                            </div>
                        </div>
                    </div>
                </Card>
            </i-col>
        </Row>
        <Row :gutter="16" style="margin-top: 10px">
            <i-col span="24">
                <Card dis-hover>
                    <div class="ziliao_div" >
                        <div class="top_common_title">
                            <div class="top_common_title_left">
                                <img class="top_common_title_left_icon" src="../../assets/bbmg/safe/zixun.png"/>
                                <p class="top_common_title_left_title">相关链接</p>
                            </div>
                        </div>
                        <div  class="ziliao_content_div" style="width: 80vw">
                            <span v-for="(item,index) in xiangguanlianjie">
                                <Button target="_blank" :to="item.url"  v-if="item.type==0" style="width: 16vw">
                                    {{item.name}}
                                </Button>
                                    <Dropdown transfer="transfer" v-else>
                                    <Button style="width: 15vw">
                                        {{item.name}}
                                        <Icon type="md-arrow-dropdown" />
                                    </Button>
                                    <DropdownMenu slot="list" >
                                        <DropdownItem v-for="item1 in item.urlArr">
                                            <a :href="item1.url" target="_blank" style="color: #2c3e50">{{item1.name}}</a>
                                        </DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </span>

<!--                            <span v-for="(item,index) in xiangguanlianjie">-->
<!--                               <a class="ziliao" target="_blank" v-if="item.type==0" style="color: #2c3e50" :href="item.url">{{item.name}}</a>-->
<!--                                <Dropdown transfer="transfer" v-else>-->
<!--                                    <a href="javascript:void(0)" style="color: #2c3e50">{{item.name}}</a>-->
<!--                                    <DropdownMenu slot="list" >-->
<!--                                        <DropdownItem v-for="item1 in item.urlArr">-->
<!--                                            <a :href="item1.url" target="_blank" style="color: #2c3e50">{{item1.name}}</a>-->
<!--                                        </DropdownItem>-->
<!--                                    </DropdownMenu>-->
<!--                                </Dropdown>-->
<!--                            </span>-->
                        </div>
                    </div>
                </Card>
            </i-col>
        </Row>

        <Modal title="快捷菜单配置"   v-model="viewManagerFastMenu" :width=1200 >
            <Split v-model="split2" style="height: 420px">
                <div slot="left" style="height: 100%; overflow-y: auto; overflow-x: hidden; padding: 5px">
                    <Table height="400"   :columns="columns2" :data="fastMenuLists" border></Table>
                </div>
                <div slot="right" style="margin-left:20px;height:100%;overflow-y:auto">
                    <Tree :data="menuTree" :render="renderContent" ></Tree>
                    <Dropdown trigger="click" style="margin-left:20px" placement="right-start"
                          ref="contentMenu" @on-click="selectMenuItem">
                        <DropdownMenu slot="list">
                            <DropdownItem name="addFastMenu">添加快捷菜单项</dropdownitem>
                        </dropdownmenu>
                    </dropdown>
                </div>
            </Split>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-save' @click="saveToFastMenu" :loading="buttonLoading">确定</Button>
                 <Button type="text"  class='ivu-btn-cancel'  @click="viewManagerFastMenu = false" >取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    // import echarts from 'echarts'
    import {Api} from '../../api/index.js'
    import { sessionStorage ,cookie} from '../../common/cacheUtils.js';
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    export default {
        components: {
            Swiper,
            SwiperSlide
        },
        directives: {
            swiper: directive
        },
        name: "homepage",
        data(){
            return{
                infosSkip: true,
                lunboArticalsSkip: true,
                noticeSkip: true,
                popularizationSkip: true,
                selectNodeInfo : {},
                selectNode :{},
                selectRoot :{},
                split2: 0.45,
                fastMenuLists: [],
                aLiIcons:[{name:'测试',value:'@/assets//door/flfg.jpg'}],
                columns2:[
                    {
                        title: '菜单名称',
                        key: 'menuName',
                    },
                    {
                        title: '排序',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'md-arrow-round-up'
                                    },
                                    style: {
                                        fontSize: '18px',
                                        color: '#559DF9'
                                    },
                                    on: {
                                        click: () => {
                                            this.upSort(params.index)
                                        }
                                    }
                                }),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('Icon', {
                                    props: {
                                        type: 'md-arrow-round-down'
                                    },
                                    style: {
                                        fontSize: '18px',
                                        color: '#559DF9'
                                    },
                                    on: {
                                        click: () => {
                                            this.downSort(params.index);
                                        }
                                    }
                                })
                            ]);
                        }
                    },
      /*     /*         {
                        title: '自定义图标',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('Select',{
                                    props:{
                                    },
                                    on: {
                                        'on-change':(event) => {
                                            this.fastMenuLists[params.index].menuIcon = event;
                                        }
                                    },
                                },
                                this.aLiIcons.map((item) =>{
                                    return h('Option', {
                                        props: {
                                            value: item.value,
                                            label: item.name
                                        }
                                    })
                                })
                            )
                        }
                    },
                    {
                        minWidth: 120,
                        title: '图标',
                        key: 'menuIcon',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.menuIcon == '') {
                                return h('span',  '')
                            }else{
                                return h('i',{'class': 'iconfont icon' + params.row.menuIcon})
                            }
                        }
                    }, */
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        maxWidth: 270,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red'
                                    },
                                    on: {
                                        click: () => {
                                            this.toDeleteFastMenu(params.index);
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
                viewManagerFastMenu: false,
                buttonLoading:false,
                remenhuodongLists:[],
                qiyeDongTais: [{infoContent:"",infoTitle:"",cover:""}],
                ziliaos:[
                   /* {
                        iconUrl:require("@/assets/door/flfg.jpg"),
                        name:"法律法规"
                    },
                    {
                        iconUrl:require("@/assets/door/zdbz.jpg"),
                        name:"制度标准"
                    },
                    {
                        iconUrl:require("../../assets/door/txsh.jpg"),
                        name:"安全审计"
                    },
                    {
                        iconUrl:require("../../assets/door/pxkj.jpg"),
                        name:"培训课件/视频"
                    },
                    {
                        iconUrl:require("../../assets/door/jcsj.jpg"),
                        name:"标准化资料"
                    },
                    {
                        iconUrl:require("../../assets/door/pxsp.jpg"),
                        name:"经验分享"
                    }*/
                ],
                menuTree: [{
                    menuId   : '100',
                    menuName : '菜单',
                    title: '菜单',
                    expand: true,
                    children: []
                }],
                fastMenus:[],
                notices:[],
                swiperOption: {
                    spaceBetween: 30,
                    centeredSlides: true,
                    observer:true,
                    observeParents:true,
                    slidesPerView: 1,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }

                },
                // swiperImgs:[],
                lists:[],
                huoDongArticals:[],
                xiangguanlianjie:[
                    {url:"https://www.mem.gov.cn/",type:'0',name:"中华人民共和国应急管理部"},
                    {url:"http://www.mee.gov.cn/",type:'0',name:"中华人民共和国生态环境部"},
                    {urlArr:this.Common.yingjiUrlArr,type:'1',name:"各省市应急管理局"},
                    {urlArr:this.Common.shengtaiUrlArr,type:'1',name:"各省市生态环境部门"}
                ],
                jiangHuaArticals:[],
                lunboArticals:[],
                articleInfo: [],
                audit:{},
                popularization: [],
                infos:[],
            }
        },
        mounted(){
            this.queryFastMenu();
            this.loadNotice();
            this.queryArticals();
            this.queryWorks();
            this.queryPopularization();
            this.ziliaoAll('-1');
            this.falvfagui();
        },
        methods: {
            downloadFile1(file) {
                this.fileUrl = Api.uploadPTWFiles + '/' + file.id + '/files/doc';
                this.$http.get(this.fileUrl,{
                    params: {},
                }).then((res) => {
                    if(res.data.result == "success"){
                        if(res.data.data.length != 0){
                            // this.docFile = res.data.data[0];
                            // this.docName = res.data.data[0].fileName;
                            console.log( res.data.data[0].id)
                            this.$Modal.confirm({
                                title: '文件下载',
                                content: '<p>是否确定下载</p>',
                                okText: '确认',
                                onOk: () => {
                                    this.$http.get(Api.uploadPTWFiles + '/file/' + res.data.data[0].id, {
                                        responseType: 'blob'      //告诉服务器我们需要的响应格式
                                    }).then((res1) => {
                                        console.log(res1)
                                        const aLink = document.createElement("a");
                                        let blob = new Blob([res1.data], {
                                            type: res1.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                                        });
                                        aLink.href = URL.createObjectURL(blob)
                                        aLink.download = res.data.data[0].fileName //标题
                                        aLink.click()
                                        document.body.appendChild(aLink)
                                    })
                                }
                            });
                        }
                    }
                })
            },
            falvfagui(){
                let data = {page: 1, rows: 7, categoryId: this.Common.falvfaguiziliao};
                data = Object.assign(data);
                this.$http.get(Api.materialsInfo,{
                    params:data,
                }).then((res) => {
                    this.infos = res.data.data;
                    this.infosSkip = false;
                }).catch( e => {
                    this.$Message.error('请求失败');
                });
            },
            ziliaoAll(parentId){
                this.$http.get(Api.materialsCategory, {params: {parentId: parentId}}).then((res) => {
                    for (let i in res.data) {
                        if (i > 5) {
                            res.data.splice(i, 1)
                        }else {
                            res.data[i].name=res.data[i].title
                            res.data[i].iconUrl=this.Common.ziliaoPng[i]
                        }
                    }
                    this.ziliaos=res.data
                })
            },
            toViewHuoDong(audit){
                this.$http.get(Api.addBrowse+"/"+audit.id).then(res => {
                })
                if(audit.worksType == '1'){
                    let routeUrl = this.$router.resolve({
                        path: "/videoPlay",
                        query: {id:audit.id}
                    });
                    window.open(routeUrl.href, '_blank');
                }
                else{
                    let routeUrl = this.$router.resolve({
                        path: "/articalPlay",
                        query: {id:audit.id}
                    });
                    window.open(routeUrl.href, '_blank');
                }
            },
            clickThumb(){
                let userId = sessionStorage('userId').getObject('userId').userId;
                this.$http.get(Api.clickThumb+"?worksId="+audit.id+"&userId="+userId).then(res => {
                    if(res.data.status == 200){
                        this.audit.thumbsStatus = res.data.data;
                        if(this.audit.thumbsStatus=='1'){
                            this.audit.thumbs++;
                        }else{
                            this.audit.thumbs--;
                        }
                    }
                })
            },
            toViewZiLiao(index){
                this.$router.push({path: '/fileDetails'})
                // let routeUrl = this.$router.resolve({
                //     path: "/fileDetails",
                //     // query: {id:this.jiangHuaArticals[index].infoId}
                // });
                // window.open(routeUrl.href, '_blank');
            },
            toViewArtical(index,type){
                if(type == "1"){
                     let routeUrl = this.$router.resolve({
                        path: "/artical",
                        query: {id:this.jiangHuaArticals[index].infoId}
                    });
                    window.open(routeUrl.href, '_blank');
                }else if(type=="2"){
                    let routeUrl = this.$router.resolve({
                        path: "/artical",
                        query: {id:this.huoDongArticals[index].infoId}
                    });
                    window.open(routeUrl.href, '_blank');
                }else if(type=="3"){
                    let routeUrl = this.$router.resolve({
                        path: "/artical",
                        query: {id:this.lunboArticals[index].infoId}
                    });
                    window.open(routeUrl.href, '_blank');
                }else if(type=="4"){
                    let routeUrl = this.$router.resolve({
                        path: "/artical",
                        query: {id:this.qiyeDongTais[index].infoId}
                    });
                    window.open(routeUrl.href, '_blank');
                }else if(type=="5"){
                    let routeUrl = this.$router.resolve({
                        path: "/artical",
                        query: {id:this.remenhuodongLists[index].infoId}
                    });
                    window.open(routeUrl.href, '_blank');
                }
            },
            queryArticals(){
                this.$http.get(Api.getArticals+"?startPage=1&size=6&infoType=3").then(res => {
                    if(res.data.status == 200){
                        this.articleInfo = res.data.data.data;
                        this.articleInfo.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        });

                        this.lunboArticals = res.data.data.data;
                        this.lunboArticals.forEach(item=>{
                            if(item.cover!=null){
                                item.img=Api.interestedPartiesUserFile+ '/file/' +item.cover;
                                // let url = Api.getMongoFileInfo +'/' + item.cover;
                                // this.$http.get(url, {params: {}}).then((res) => {
                                //     item.img = res.data.picture;
                                // }).catch(e => {
                                //     //console.log(e)
                                //     this.$Message.error("数据获取失败")
                                // })
                            }
                            this.lunboArticalsSkip = false;
                        })
                    }
                });
                this.$http.get(Api.getArticals+"?startPage=1&size=6&infoType=1").then(res => {
                    if(res.data.status == 200){
                        this.jiangHuaArticals = res.data.data.data;
                        this.jiangHuaArticals.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        })
                    }
                });
                this.$http.get(Api.getArticals+"?startPage=1&size=7&infoType=2").then(res => {
                    if(res.data.status == 200){
                        this.huoDongArticals = res.data.data.data;
                        this.huoDongArticals.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        })
                    }
                })
                this.$http.get(Api.getArticals+"?startPage=1&size=6&infoType=2").then(res => {
                    if(res.data.status == 200){
                        this.qiyeDongTais = res.data.data.data;
                        this.qiyeDongTais.forEach(item=>{
                            this.$http.get(Api.interestedPartiesUserFile+"/"+item.id+"/files/picture").then((res1) => {
                            if(res1.data.data.length >0)
                                this.$set(item,"cover",res1.data.data[0].picture)
                            }).catch(e => {});
                        })
                    }
                })
            },
            loadNotice(){
                this.$http.get(Api.getNotices+"?startPage=1&size=7&type=1&punlishOrgId="+sessionStorage('userId').get('userId').companyId).then(res => {
                    if(res.data.status == 200){
                        this.notices = res.data.data.data;
                        this.notices.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        })
                        this.noticeSkip = false;
                    }
                });
            },
            queryFastMenu(){
                let userId = JSON.parse(sessionStorage('userId').get('userId')).userId
                this.$http.get(Api.FastMenuByUserId+"/oftenmenus/" + userId).then(res => {
                    res.data.data.forEach(item=>{
                        item.iconCode = 'iconfont icon' + item.menuIcon;
                    });
                    this.fastMenus = res.data.data;
                });
            },
            queryWorks(){
                this.$http.get(Api.queryWorks+"?type=2&startPage=1&size=6&worksType=0").then(res => {
                    res.data.data.data.forEach(item=>{
                        item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        this.$set(item,"cover","")
                        this.remenhuodongLists.push(item);
                    });
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            queryPopularization(){
                this.$http.get(Api.popularization, {
                    params: {
                        startPage: 1,
                        pageSize: 6
                    }
                }).then(function(res){
                    this.popularization = res.data.data;
                    this.popularization.forEach(item=>{
                        item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                    })
                    console.log(this.popularization);
                    this.popularizationSkip = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            toViewMenu(e){
                let data = {id: e.menuId.substr(0,5),fastMenu:e.menuUrl};
                this.$router.push({path:'/modular',query: data});
            },
            toManagerFastMenu(){
                this.viewManagerFastMenu = true;
                this.fastMenuLists = JSON.parse(JSON.stringify(this.fastMenus));
                this.selectNodeInfo = this.menuTree[0];
                this.getMenusByUserId();
            },
            renderContent(h, {root,node,data}){
                return h('span', {
                    style: {
                        display: 'inline-block',
                        cursor: 'pointer',
                        color: 'green'
                    },
                    on: {
                        click: () => {
                            this.selectNodeInfo = data;
                        },
                        //右键点击事件
                        contextmenu: (e) => {
                            e.preventDefault();
                            this.selectNodeInfo = data;
                            if(this.selectNodeInfo.isLeaf == 3){
                                this.$refs.contentMenu.$refs.reference = event.target;
                                this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu.currentVisible;
                            }
                        }
                    }
                }, [h('span', [h('Icon', {
                    props: {
                        type: 'folder'
                    },
                    style: {
                        marginRight: '8px'
                    }
                }), h('span', data.menuName)])]);
            },
            selectMenuItem(name){
                if(this.fastMenuLists.length > 7){
                    this.$Message.error('快捷菜单最多允许设置7个');
                }
                var add = true;
                this.fastMenuLists.forEach(item=>{
                    if(item.menuUrl == this.selectNodeInfo.menuUrl)
                        add = false;
                })
                if(add)
                    this.fastMenuLists.push(this.selectNodeInfo);
                this.fastMenuLists[this.fastMenuLists.length-1].order = this.fastMenuLists.length;
            },
            getMenusByUserId(){
                 let userId = JSON.parse(sessionStorage('userId').get('userId')).userId
                this.$http.get(Api.getMenusByUser + "/"+userId, {params:{}}).then(res => {
                    console.log(res.data.data)
                    this.$set(this.selectNodeInfo,'children',res.data.data.children)
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            toDeleteFastMenu(index){
                this.fastMenuLists.splice(index,1);
            },
            upSort(index){
                this.fastMenuLists[index-1].order = index;
                this.fastMenuLists[index].order = index-1;
                var row = this.fastMenuLists[index-1];
                this.$set(this.fastMenuLists,index-1,this.fastMenuLists[index]);
                this.$set(this.fastMenuLists,index,row);
            },
            downSort(index){
                this.fastMenuLists[index+1].order = index;
                this.fastMenuLists[index].order = index+1;
                var row = this.fastMenuLists[index+1];
                this.$set(this.fastMenuLists,index+1,this.fastMenuLists[index]);
                this.$set(this.fastMenuLists,index,row);
            },
            saveToFastMenu(){
                this.buttonLoading = true;
                let ids = "";
                this.fastMenuLists.forEach(item=>{
                    ids += (item.menuId + "-" + item.order +  ",");
                })
                let userId = JSON.parse(sessionStorage('userId').get('userId')).userId
                this.$http.post( Api.FastMenuByUserId + '/user/'+userId+'/menu/'+ids).then(res => {
                   this.buttonLoading = false;
                   if(res.data.result == "sucess"){
                        this.$Message.success('保存成功');
                        this.queryFastMenu();
                   }
                    else
                        this.$Message.success('保存失败');
                    this.viewManagerFastMenu = false;
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
                this.viewManagerFastMenu = true;
            },
            downloadFile(id, type){
                type = type == 0 ? 'picture': 'video';
                this.$http.get(Api.interestedPartiesUserFile + "/" + id + "/files/" + type).then((r) => {
                    if (r.data.result == "success") {
                        r.data.data.forEach(item=>{
                            let url = Api.downloadMongoFile + "/" + item.id
                            this.$http.get(url, {
                                responseType: 'blob'      //告诉服务器我们需要的响应格式
                            }).then((res) => {
                                const aLink = document.createElement("a");
                                let blob = new Blob([res.data], {
                                    type: res.body.type      //将会被放入到blob中的数组内容的MIME类型
                                });
                                aLink.href = URL.createObjectURL(blob)
                                aLink.download = item.fileName //标题
                                aLink.click();
                                document.body.appendChild(aLink)
                            })
                        })
                    }
                }).catch(e => {
                    this.$Message.error("文件读取失败");
                });
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }
</script>

<style scoped>

  @import '../../index.css';

.notice_title{
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 700;
    color: #EB4625;
    margin-bottom: 15px;
}

.fast_menu_div{
    display:flex;
    flex-wrap:wrap;
    flex-content:space-between;
    margin-top:20px;
    margin-bottom:20px;
}

.fast_menu_div_comm{
    margin-bottom:10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.fast_menu_div_comm:hover{
    cursor: pointer;
}

.fast_menu_div0{
    background: linear-gradient(90deg, #FE796E, #FF9B97);
}

.fast_menu_div1{
    background: linear-gradient(90deg, #68C6F0, #87D1EE);
}

.fast_menu_div2{
    background: linear-gradient(90deg, #F7AE43, #FFCC80);
}

.fast_menu_div3{
    background: linear-gradient(90deg, #B5D773, #C6E0B2);
}

.fast_menu_div4{
    background: linear-gradient(90deg, #4A84E4, #82B1FF);
}

.fast_menu_div5{
    background: linear-gradient(90deg, #B388FF, #C5B1EA);
}

.fast_menu_div6{
    background: linear-gradient(90deg, #45A5F3, #86C8FD);
}

.zidingyi{
    background: linear-gradient(90deg, #B0C5CE, #CFD8DC);
}

.zidingyi_top{
    color:white;
    border-radius: 3px;
    font-size:40px;
}

.zidingyi_bottom{
   font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 30px;
}

.artical{
    width: 100%;
    /*margin-left: 15px;*/
    display: flex;
}

.articals_child{
    width:96%;
    display: flex;
    justify-content: space-between;
}

.articals_child_title{
    flex:auto;
    width:0;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5C5C5C;
    line-height: 30px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
.articals_child_date{
    margin-left: 10px;
    width: 95px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #A3A3A3;
    flex-shrink:0;
    line-height: 32px;
}
.articals_child:hover .articals_child_date,.articals_child:hover .articals_child_title:hover,
.qiye_right_div_item_title:hover,.qiye_right_div_item_content:hover,qiye_left_top_div_img:hover,
.huodong_item_img:hover,.huodong_item_title:hover,qiye_left_top_div_title:hover{
    cursor: pointer;
    color: #F65555;
}



.top_artical_div{
    background-color:#fff;
    height: 220px
}

.top_artical_div ul {
    list-style-type: none;
    height: 100%;
    overflow-y: hidden;
}

.top_artical_div ul li:before{
    display: inline-block;
    content: "▶";
    padding-right: 10px;
    color: #FEA6A5;
    font-size:6px;
    line-height: 32px;
}

.top_common_title{
    background-image: url("../../assets/bbmg/safe/title_bg.png");
    background-repeat: no-repeat;
    height: 40px;
    display: flex;
    width:100%;
    border-bottom:5px solid #fea6a5;
    justify-content: space-between;
}
.top_img{
    height: 220px;
    width: 100%;
    margin-top: 3px;
}


.top_common_title_left{
    display: flex;
    align-items: center;
    height: 30px;
}

.top_common_title_left_icon{
    margin-left: 50px;
    width: 17px;
    height: 19px;
}


.top_common_title_left_title{
    margin-left: 10px;
    width: 57px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
}


.top_common_title_right{
    width: 45px;
    height: 15px;
    line-height: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E43534;
    line-height: 30px;
}
.top_left_swiper{
    height: 260px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.top_center_leader{
    height: 260px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.top_right_zixun{
    height: 260px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.top_right_hdzixun{
    height: 260px;
    width: 500px;
    display: flex;
    flex-direction: column;
}


.top_right_qiyedongtai{
    height: 260px;

    display: flex;
    flex-direction: column;
}


.row_child_item:hover{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.row_child_item_img{
    width: 100%;
    height: 170px;
    /*border-radius: 5px;*/
}

.row_child_item_all_info{
    padding-top:3px;
    padding-bottom: 3px;
    height: 50px;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 12px;
    padding-right: 12px;
}

.row_child_item_title{
    width: 90%;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row_child_item_info{
    display: flex;
    justify-content: space-between
}

.row_child_item_info_left{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B3B3B3;
}

.row_child_item_info_right{
    width:120px;
    display: flex;
    justify-content: space-around
}

.row_child_item_info_right_child{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row_child_item_info_right_child_icon{
    width: 19px;
    height: 15px;
}

.row_child_item_info_right_child_icon:hover{
    cursor: pointer;
}

.row_child_item_info_right_child_label{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B3B3B3;
    margin-left:5px;
}

.remenhuodong_div{
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:220px;
}

.huodong{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
}

.huodong_item_img{
    width:200px;
    height:140px;
}

.huodong_item_title{
    width:200px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    line-height: 38px;
}

.ziliao_div{
    height:110px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
}

.ziliao_content_div{
    width:1050px;
    height:70px;
    display:flex;
    justify-content:space-around;
    align-items:center;
}

.ziliao_content_div button:hover{
    color: #757575;
}

.ziliao_content_div a:hover{
  color: #757575;
}

.ziliao{
    display:flex;
    align-items:center;
    justify-content:space-around;
}


.qiye_content_div{
    height:220px;
    display:flex;
    justify-content:space-around;
}

.qiye_left_div{
    width:250px;
    margin-right:10px;
    display:flex;
    flex-direction:column;
}

.qiye_left_top_div{
    position:relative;
    width:250px;
    height:160px;
}

.qiye_left_top_div_img{
    width:250px;
    height:160px;
    cursor: pointer;
}

.qiye_left_top_div_title{
    position:absolute;
    left:0px;
    bottom:0px;
    width:250px;
    height:30px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32px;
    background: #000000;
    opacity: 0.63;
}

.qiye_left_bottom_title{
    width:250px;
    height:56px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
}


.qiye_right_div{
    margin-left:30px;
    flex:auto;
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    overflow:hidden;
}

.qiye_right_div_item{
    display:flex;
    justify-content:space-between;
    flex-direction:column;
}

.qiye_right_div_item_title{
    font-size: 14px;
    margin-bottom:14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

.qiye_right_div_item_content{
    height: 38px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
    text-overflow:ellipsis;
    overflow:hidden;
}

  .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
  }

</style>
